<template>
  <div class="main_page flex_ac_jc">
    <!-- <img src="../../static/logo.png" alt="" class="logo"> -->

    <div class="login_box">
      <div class="tt">智体评估</div>

      <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" class="login_form pad_t40">
        <div class="pad_b10">
          <el-form-item label="" prop="mobile">
            <div class="flex_ac">
              <div class="flex1">
                <el-input v-model="ruleForm.mobile" prefix-icon="el-icon-user" size="normal"  placeholder="请输入账号"></el-input>
              </div>
            </div>
          </el-form-item>
        </div>
        <div class="pad_b10">
          <el-form-item label="" prop="password">
            <el-input type="password" v-model="ruleForm.password" prefix-icon="el-icon-lock" size="normal" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
        </div>
        <!-- <div class="pad_b10 flex">
          <div class="flex1">
            <el-form-item label="" prop="code">
              <el-input type="text" v-model="ruleForm.code"  size="normal" placeholder="请输入验证码"></el-input>
            </el-form-item>
          </div>
          <img :src="img_code" @click="get_img_code" style="height:50px" class="margin_l20" alt="">
        </div> -->
        <!-- <div class="flex_ac_jc forget">
          <router-link :to="{path:'/password'}" class="margin_a">忘记密码</router-link>
        </div> -->
        <!-- <div class="pad_t30"></div> -->
        <div class="pad_t40">
          <el-button type="primary" :loading="is_ajax" style="width: 100%; height: 60px;" @click="submitForm('ruleForm')">登录</el-button>
        </div>
     <!-- <div class="pad_t20 flex_ac_jc">
        <el-button type="text" @click="aa">我要申报</el-button>
      </div> -->

      </el-form>
    </div>
    <div class="copyright">copyright © {{year}} 阳光赛事运营(山东)有限公司</div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {

    return {
      is_ajax:false,
      ruleForm: {
        mobile: '',
        password:'',
        code:''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        // code: [
        //   { required: true, message: '请输入验证码', trigger: 'blur' }
        // ]
      },
      img_code:''
    }
  },
  created() {
    let  state=this.getState();
    this.year=new Date().getFullYear()
    if(state.token){
      this.$router.replace({path:'/'})
    }else{
      // this.get_img_code()
    }
  },
  methods:{
    aa(){
      this.tip_show('上线后替换','success');
    },
    get_img_code(){
      const _this=this;
      _this.img_code=_this.http+'/api/Login/verify?time='+Math.random()*100000000
    },
    submitForm(formName) {
      const _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.is_ajax=true
          _this.axios.post("/manage/Login/login", {
            account: _this.ruleForm.mobile,
            password: _this.ruleForm.password
          }).then(function(data) {
            if(data){
              _this.tip_show('登录成功','success');
              _this.setState(data.data);
              _this.$store.commit('userinfo',data.data);
              _this.setheader();
              // _this.$router.replace({path:'/'})
              _this.get_auth()
              _this.$store.commit('is_login',data.data)
            }else{
              // _this.get_img_code()
              _this.is_ajax=false;
            }

          }).catch(function(error) {
            _this.is_ajax=false
            console.log(error);
            // _this.get_img_code()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    get_auth(){

      // let url=this.get_enter_url(res.data);
      // if(url){
      //   this.$router.replace({path:url})
      // }

      // this.$router.replace({path:'/'})

      // return false;

      let  state=this.getState();
      this.axios.get("/manage/admin.RolePermission/role_menu", {params:{roleId:state.role_id}}).then((res) => {
          if (res) {
            this.$store.commit("set_menu", res.message);
            let url=this.get_enter_url(res.message);
            if(url){
              this.$router.replace({path:url})
            }
          }
      }).catch((err) => {
          console.log(err);
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main_page{position: fixed; left: 0; top: 0;width: 100%; height: 100%; padding: 0 230px;  background: url(../../static/login_bg.jpg) center center; background-size: cover;}
.logo{height: 66px; position: absolute; left: 48px; top: 48px;}
.login_text .tt{font-size: 60px; margin-bottom: 20px;}
.login_text .pp{font-size: 40px;}
.login_box{border-radius: 10px; background: #fff; padding: 60px 40px; height: 500px; width: 400px; position:fixed; top:50%; margin-top:-250px;right:10%}
.login_box .tt{font-size: 30px;  font-weight: bold; text-align:center}

.forget a{color: #828696; text-decoration: none;}
.forget a:hover{color: #004EA2;}
.copyright{width: 100%; line-height:50px; position:absolute; left:0; bottom:10px; color:#fff; text-align:center}
</style>
